<template>
    <div class="changePassword">
        <div class='moduleHead'>
            <router-link :to="{name:'setting'}">
                <span class="back"></span>
            </router-link>
            <span>{{language.changePassword_title}}</span>
            <span @click='submitData' :class="submitBtnClass" class="right">{{language.unify_done}}</span>
        </div>
        <div class="body">
            <div class="line_input">
                <input @input="setSubmitState" v-model="oldPassword" v-validate="'required|min|max'" name="oldPassword" maxlength=18 spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="password" v-bind:placeholder="language.changePassword_curPassword">
            </div>
            <div class="forgot_box">
                <router-link :to="{name: 'forgotPassword',query: { hideSignIn: 'true' }}" class="main_color">
                    {{language.changePassword_forgotPassword}}
                </router-link>
            </div>
            <div class="line_input">
                <input @input="setSubmitState" v-model="newPassword" v-validate="'required|min|max'" name="newPassword" maxlength=18 spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="password" v-bind:placeholder="language.changePassword_newPassword">
            </div>
            <div class="line_input">
                <input @input="setSubmitState" v-model="confirmPassword" v-validate="'required|min|max'" name="confirmPassword" maxlength=18 spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="password" v-bind:placeholder="language.changePassword_confirmPassword">
            </div>
        </div>
        <publicDialog :props="this.dialogData"></publicDialog>
        <loading :props="{show:loadingAjax,type:'page'}"></loading>
    </div>
</template>
<script>
import * as API from '../api';
import validationMixin from '../plugins/my-validate'
import publicDialog from './PublicDialog'
import loading from './Loading'

export default {

    name: 'changePassword',

    mixins: [validationMixin],

    components: {
        publicDialog,
        loading,
    },

    data: function() {
        return {
            oldPassword: '',
            newPassword: '',
            confirmPassword: '',
            submitDisabled: true,
            loadingAjax: false,
            dialogData: {}
        }
    },

    computed: {
        submitBtnClass() {
            if (this.submitDisabled || this.loadingAjax) {
                return 'desabled';
            }
        }
    },

    created() {
        this.defaultData = _.clone(this.$data);
    },

    activated: function() {
        this.dialogData = {};
    },

    methods: {

        curCheckAll() {
            return this.checkAll();
        },

        clearValue(key) {
            this[key] = '';
        },

        checkIsMatchPassword(){
            return this.newPassword == this.confirmPassword;
        },

        setSubmitState() {
            this.submitDisabled = this.curCheckAll() ? false : true;
        },

        submitData() {
            var tthis = this;

            if(!this.checkIsMatchPassword()){
                tthis.dialogData = {
                    position: 'top',
                    type: 'error',
                    content: {
                        info: 'Passwords do not match.'
                    }
                };
                return;
            }
            if (this.curCheckAll() && !this.loadingAjax) {
                this.loadingAjax = true;
                API.reset_password({
                    data: {
                        original_password: this.oldPassword,
                        password: this.newPassword,
                        password_repeat: this.confirmPassword
                    },
                    success: function(data) {
                        if (typeof(data.errcode) == 'undefined') {
                            Object.assign(tthis.$data, tthis.defaultData);
                            tthis.dialogData = {
                                position: 'top',
                                type: 'successful',
                                content: {
                                    info: tthis.language.changePassword_successful_tip,
                                }
                            };
                        } else {
                            tthis.dialogData = {
                                position: 'top',
                                type: 'error',
                                content: {
                                    info: data.errmsg,
                                }
                            };
                        }
                    },
                    complete: function() {
                        tthis.loadingAjax = false;
                    }
                })
            }
        },
        
    },
}

</script>
<style scoped>
.changePassword {
    padding-top: 44px;
    font-size: 14px;
    background-color: #f7f7f7;
}

.changePassword .moduleHead .right {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16px;
    width: 50px;
    opacity: 1;
}

.changePassword .moduleHead .right.desabled {
    opacity: .5;
}

.changePassword .line_input {
    margin-top: 20px;
}

.changePassword .line_input input {
    font-size: 14px;
    width: 100%;
    height: 42px;
    border: 0;
    color: #555;
    background: #fff;
    border-radius: 0;
    text-indent: 20px;
    border: 1px solid #e8e9ec;
    border-left: 0;
    border-right: 0;
}

.changePassword .forgot_box {
    padding: 0 20px;
    line-height: 40px;
    margin-bottom: -12px;
}

</style>
